<template>
  <div class="tags-page">
    <el-card class="page-card">
      <template #header>
        <div class="page-header">
          <h3>商品标签管理</h3>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增标签
          </el-button>
        </div>
      </template>

      <div class="card-body">
        <!-- 搜索表单 -->
        <el-form :model="searchObject" inline class="search-form">
          <el-form-item label="标签编码">
            <el-input
              v-model="searchObject.code"
              placeholder="请输入标签编码"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="标签名称">
            <el-input
              v-model="searchObject.name"
              placeholder="请输入标签名称"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 标签卡片容器 -->
        <div class="tags-container" v-loading="loading">
          <div
            v-for="tag in pageData.data"
            :key="tag.id"
            class="tag-item"
            :style="{ borderColor: tag.color }"
          >
            <div class="tag-header">
              <el-tag :color="tag.color" :style="{ backgroundColor: tag.color, color: '#fff' }">
                {{ tag.name }}
              </el-tag>
              <div class="tag-actions">
                <el-button type="primary" size="small" text @click="handleEdit(tag)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" text @click="handleDelete(tag)">
                  删除
                </el-button>
              </div>
            </div>
            <div class="tag-info">
              <div class="info-item">
                <span class="label">标签编码：</span>
                <span>{{ tag.code }}</span>
              </div>
              <div class="info-item">
                <span class="label">商品数量：</span>
                <el-tag size="small" type="success">{{ tag.productCount || 0 }}</el-tag>
              </div>
              <div class="info-item">
                <span class="label">排序：</span>
                <span>{{ tag.sortNum || 0 }}</span>
              </div>
              <div class="info-item" v-if="tag.description">
                <span class="label">标签说明：</span>
                <span>{{ tag.description }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="searchObject.no"
            v-model:page-size="searchObject.size"
            :page-sizes="[12, 24, 48, 96]"
            :total="pageData.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="sizeChange"
            @current-change="pageChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="tagForm" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="标签编码" prop="code">
          <el-input v-model="tagForm.code" placeholder="请输入标签编码" />
        </el-form-item>
        <el-form-item label="标签名称" prop="name">
          <el-input v-model="tagForm.name" placeholder="请输入标签名称" />
        </el-form-item>
        <el-form-item label="标签颜色" prop="color">
          <el-color-picker v-model="tagForm.color" show-alpha />
          <span style="margin-left: 10px">{{ tagForm.color }}</span>
        </el-form-item>
        <el-form-item label="标签图标">
          <el-select v-model="tagForm.icon" placeholder="选择图标" style="width: 100%">
            <el-option label="火" value="火" />
            <el-option label="新" value="新" />
            <el-option label="爆" value="爆" />
            <el-option label="荐" value="荐" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="tagForm.sortNum" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="标签说明">
          <el-input v-model="tagForm.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import { defineStore } from 'pinia'
import { usePage } from '@/uses/usePage.js'

const dialogVisible = ref(false)
const formRef = ref()

// 定义搜索状态存储
const searchStore = defineStore('tagStore', {
  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 12,
        sortField: "id",
        sortMethod: "desc",
        shop: '',
        name: '',
        code: ''
      }
    }
  }
})

const { searchObject } = searchStore()
const { pageData, searchList, sizeChange, pageChange, search, changeTableSort, loading } = usePage('/tag/search', searchObject)

const tagForm = reactive({
  id: null,
  code: '',
  name: '',
  color: '#409eff',
  icon: '',
  sortNum: 0,
  description: ''
})

const formRules = {
  code: [{ required: true, message: '请输入标签编码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
  color: [{ required: true, message: '请选择标签颜色', trigger: 'change' }]
}

const isEdit = computed(() => !!tagForm.id)
const dialogTitle = computed(() => isEdit.value ? '编辑标签' : '新增标签')

const handleAdd = () => {
  Object.assign(tagForm, {
    id: null,
    code: '',
    name: '',
    color: '#409eff',
    icon: '',
    sortNum: 0,
    description: ''
  })
  dialogVisible.value = true
}

const handleEdit = (row) => {
  Object.assign(tagForm, { ...row })
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
  searchList()
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
      dialogVisible.value = false
      searchList() // 刷新列表
    }
  })
}

// 搜索
const handleSearch = () => {
  searchObject.no = 1 // 重置到第一页
  searchList()
}

// 重置
const handleReset = () => {
  searchObject.name = ''
  searchObject.code = ''
  searchObject.no = 1
  searchList()
}
</script>

<style scoped>
.tags-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
}

.page-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-card :deep(.el-card__header) {
  padding: 12px 16px;
}

.page-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 16px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  font-size: 16px;
}

.search-form {
  margin-bottom: 12px;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  flex-shrink: 0;
}

.tags-container {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
  align-content: start;
}

.tag-item {
  border: 2px solid;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
  height: fit-content;
}

.tag-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.tag-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  font-size: 13px;
  color: #606266;
}

.info-item .label {
  color: #909399;
  font-weight: 500;
}

.pagination-container {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
</style>

